import './login.less';
import React, { useState, Fragment } from 'react';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Form, Input, notification, Space } from 'antd';
import { history, request } from 'umi';
// 导入图片
import img1 from './images/banner.png';
import img2 from './images/logos.png';

export default function Login(props) {
    const [api, contextHolder] = notification.useNotification();
    // 登陆事件
    const onFinish = (values) => {
        console.log(values);
        request('/user/login', {
            method: 'get',
            params: {
                username: values.username,
                password: values.password,
            },
        }).then((res) => {
            if (res.code == 200 && res.msg == '登录成功') {
                api['error']({
                    message: `登陆成功`,
                    description: res.message,
                    placement: 'top'
                });
                console.log(`res`, res);
                localStorage.setItem('pf_token', res.token);
                history.push('/');
            } else {
                console.log(`res`, res);
                api['error']({
                    message: `登陆失败`,
                    description: res.message,
                    placement: 'top'
                });
            }
        })
    };
    return (
        <Fragment>
            {contextHolder}
            <div className="logbox">
                <div className="logform">
                    <div className="leftimg">
                        <img src={img1} alt="" />
                    </div>
                    <div className="rightform">
                        <div className="rbox">
                            <img src={img2} alt="" />
                            <div>
                                <Form
                                    name="normal_login"
                                    className="login-form"
                                    initialValues={{
                                        remember: true,
                                    }}
                                    onFinish={onFinish}
                                >
                                    <Form.Item
                                        name="username"
                                        rules={[
                                            {
                                                required: true,
                                                message: '请输入账号!',
                                            },
                                        ]}
                                    >
                                        <Input
                                            className="inp"
                                            title="账号"
                                            prefix={<UserOutlined className="site-form-item-icon" />}
                                            style={{ placeholder: '#fff' }}
                                            placeholder="账号"
                                        />
                                    </Form.Item>
                                    <Form.Item
                                        name="password"
                                        rules={[
                                            {
                                                required: true,
                                                message: '请输入密码!',
                                            },
                                        ]}
                                    >
                                        <Input.Password
                                            className="inp"
                                            placeholder="密码"
                                            prefix={<LockOutlined className="site-form-item-icon" />}
                                        />
                                    </Form.Item>
                                    <Form.Item>
                                        <Button
                                            type="primary"
                                            htmlType="submit"
                                            className="login-form-button"
                                        >
                                            立即登录
                                        </Button>
                                    </Form.Item>
                                </Form>
                            </div>
                            <div className="logbtn"></div>
                            <div className="tips">
                                警告：本软件受中国专利法与国际公约保护，未经授权擅自复制全部或部分内容，将接受法律的严厉惩罚！V.20221024
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </Fragment>
    );
}
